<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="充值记录" subTitle="" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <avue-data-panel :option="option"></avue-data-panel>
    <div class="crud_content">
      <avue-crud :option="crudData.Listoption" :data="crudData.data" v-model:page="crudData.page"
      @search-change="searchChange"  @refresh-change="refreshChange" @selection-change="selectionChange" @search-reset="searchReset" @on-load="onLoad">
        <template #menu="{ row, index, size }">
          <el-dropdown  @command="(command) => handleCommand(command, row)">
            <el-icon>
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="success" :disabled="row.orderStatus!=2">手动成功</el-dropdown-item>
                <el-dropdown-item command="fail" :disabled="row.orderStatus!=2">手动失败</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

        <template #rechargeAmount="{ row }"> 
          <el-tag :key="row.rechargeAmount" :type="row.rechargeAmount" effect="light" round>
            {{ row.rechargeAmount }}
          </el-tag>
        </template>
        <template #intoOneMoney="{ row }"> 
          <span v-if="row.intoOneMoney"> {{ row.intoOneMoney }}</span>
          <span v-else>-</span>
        </template>
        <template #orderStatus="{ row }">
          <el-tag :type="getTagType(row.orderStatus)" effect="dark">
            {{ getOrderStatusLabel(row.orderStatus) }}
          </el-tag>
        </template>
      </avue-crud>

      <el-dialog v-model="centerDialogVisible" title="" width="440" destroy-on-close center class="custom-dialog">
        <div class="swal2-header">
          <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
          <div class="swal2_fs">{{ Poptitle }}</div>
        </div>
        <div class="swal2_he">请仔细核对</div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="success" class="btn btn-primary" @click="confirm">
              确认
            </el-button>
            <el-button class="btn" type="" @click="centerDialogVisible = false">
              取消
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="Withdrawalfailed" title="提现失败" width="600" destroy-on-close center>
        <avue-form :option="inputData" @submit="submit"></avue-form>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox, tourEmits } from "element-plus";
import TitleComponent from "@/components/title/index.vue";
import { useRouter } from "vue-router";
import BasicContainer from "@/components/basic-container/main.vue";
import { getList, remove, update, amountCount ,statistics} from "@/api/refersh/list.js";

const router = useRouter();
const centerDialogVisible = ref(false); //弹框
const Withdrawalfailed = ref(false); //失败弹框
const Poptitle = ref("确认直接成功?"); //弹框标题

// 输入框
const inputData = {
  column: [
    {
      label: "拒绝理由",
      prop: "input",
      size: "large",
      span: 24,
    },
  ],
};

const option = reactive({
  span: 6,
  data: [
    {
      title: "充值金额",
      count: "102,400",
      icon: "el-icon-message",
      color: "#00a7d0",
    },
  ],
});

const crudData = reactive({
  query:{},
  loading: true,
  state:'',
  delIds: '',
  selectionList: [],
  confirmDeleteVisible: false,
  form: {
    edit: true,
    creat: "",
    view: "",
  },
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 1,

  },
  openTyep: '',
  data: [],
  Listoption: {
    menu: false,
    delBtn: false,
    editBtn: false,
    addBtn: false,
    selection: true,
    excelBtn: true,
    border: true,
    index: true,
    height: 'auto',
    calcHeight: '8',
    expandLevel: 3,
    headerAlign: "center",
    align: "center",
    tree: true,
    labelWidth: 100,
    searchMenuSpan: 6,
    tip: false,
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    column: [
      {
        label: "用户账号",
        prop: "userNumber",
        search:true,
      },
      {
        label: "用户id",
        prop: "userId",
      },
      {
        label: "所属代理",
        prop: "agencyType",
      },
      {
        label: "用户等级",
        prop: "vipLevel",
      },
      {
        label: "充值类型",
        prop: "topUpType",
      },
      {
        label: "充值金额",
        prop: "topUpMoney",
      },
      {
        label: "到账金额",
        prop: "intoOneMoney",
      },
      {
        label: "付款截图",
        prop: "screenshot",
        type: "upload",
        listType: "picture-img",
      },
      {
        label: "充值时间",
        prop: "topUpTime",
        type: "datetime",
        sortable: true,
      },
      {
        label: "订单状态",
        prop: "orderStatus",
        type: "select",
        filters: true,
        filterMethod: function (value, row, column) {
          return row.orderStatus === value;
        },
        dicData: [
          { label: "充值中", value: '1' },
          { label: "审核中", value: '2' },
          { label: "审核成功", value: '3' },
          { label: "审核失败", value: '4' },
        ],
      },
      {
        label: "充值通道",
        prop: "topUpAisle",
        type: "select",
        dicData: [
          { label: "SUNPAY", value: "SUNPAY" },
        ],
      },
      {
        label: "操作",
        prop: "menu",
        width: 60,
        slot: true,
      },
    ],
  }
});
const refreshChange = () => {
  onLoad(crudData.page);
}
// 重置
function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}
const loadTags = async()=>{
  let res = await statistics()
  option.data[0].count = res.data
  console.log('ressss====',res);
  
}
loadTags()
// 列表模糊搜索
function searchChange(params: {} | undefined, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

const submit = async (row,done)=>{
  await update(crudData.form)
  ElMessage.success('操作成功');
  onLoad(crudData.page);
  done()
}
const onLoad = (page, params = {}) => {
  crudData.loading = false;
  getList(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then(res => {
    console.log('getReviewLog--', res);
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records
    // .map(item=>({...item,rent: '12-24'}));
    crudData.loading = false;
  });
}

// 确认
const confirm = async () => {
  if(crudData.state === 'success'){
    crudData.form = Object.assign(crudData.form,{orderStatus: 3})
  }else{
    crudData.form = Object.assign(crudData.form,{orderStatus: 4})
  }
  await update(crudData.form)
  ElMessage.success('操作成功');
  onLoad(crudData.page);
  centerDialogVisible.value = false;
};

const handleCommand = (state, form) => {
  console.log(state);
  crudData.form = form
  crudData.state = state
  if (state == "success") {
    Poptitle.value = "确认提现成功吗?";
    centerDialogVisible.value = true;
  } else if (state == "fail") {
    Poptitle.value = "确认提现失败吗?";
    centerDialogVisible.value = true;
  }
};

// 删除
const rowDel = (form, index, done) => {
  ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      done(form); // 删除逻辑，此处暂未实现删除功能
    })
    .catch(() => {
    });
};

const getTagType = (orderStatus) => {
  switch (orderStatus) {
    case '2':
      return "success";
    case '1':
      return "info";
    case '4':
      return "danger";
    case '3':
      return "success";
    default:
      return "";
  }
};

const getTagEffect = (orderStatus) => {
  switch (orderStatus) {
    case 1:
      return "dark";
    case 2:
      return "plain";
    case 3:
      return "light";
    default:
      return "dark";
  }
};

const getOrderStatusLabel = (orderStatus) => {
  const statusMap = {
    1: "充值中",
    2: "待审核中处理",
    3: "审核成功",
    4: "审核失败",
  };
  return statusMap[orderStatus] || "未知状态";
};
</script>

<style scoped lang="scss">
.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.content-header {
  margin: 1rem;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
  width: 800px !important;
}
</style>
